<template>
  <div class="favorites-page">
    <h2 class="section-title">我的收藏</h2>
    
    <div v-if="favoriteNews.length" class="news-grid">
      <NewsCard 
        v-for="item in favoriteNews" 
        :key="item.id"
        :news="item"
      />
    </div>
    
    <div v-else class="no-favorites">
      <el-empty description="您还没有收藏任何新闻" />
      <el-button type="primary" @click="$router.push('/')">浏览新闻</el-button>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useNewsStore } from '@/stores/news';
import NewsCard from '@/components/NewsCard.vue';

const newsStore = useNewsStore();
const { favoriteNews } = storeToRefs(newsStore);
</script>

<style scoped>
.favorites-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.section-title {
  margin: 0 0 24px 0;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.no-favorites {
  text-align: center;
  padding: 60px 0;
}

.no-favorites .el-button {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
  }
  
  .section-title {
    font-size: 20px;
  }
}
</style>